<template>
    <basic-container>
        <el-form :inline="true" :model="query" class="demo-form-inline">
          <el-row>
            <el-form-item label="项目编号:">
              <el-input v-model="query.projectCode" clearable placeholder="项目编号" size="small"></el-input>
            </el-form-item>
            <el-form-item label="项目名称:">
              <el-input v-model="query.projectName" clearable placeholder="项目名称"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch" :loading="loading">搜索
              </el-button>
              <el-button size="small" icon="el-icon-delete" @click="searchReset" :loading="loading">清空</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <div class="btn-operate">
<!--        <el-button v-if="permissions.projectProblem_add" @click="addOrUpdateHandle()" type="primary" size="small" icon="el-icon-plus">-->
<!--          新增-->
<!--        </el-button>-->
      </div>
        <el-table v-loading="loading" ref="table" :data="data"
                  border header-row-class-name="container-table-header"
                  highlight-current-row class="current-page"
                  size="small" stripe style="width: 100%;margin-bottom: 20px;"
                  :row-key="rowKeyMethod"
                  @cell-click="handleRowClick">
          <el-table-column type="expand" width="1">
            <template slot-scope="props">
              <el-table
                :data="props.row.projectProblemDTOS"
                style="width: 100%"
                :row-key="rowKeyMethod1"
              >
                <el-table-column prop="problemTitle" label="问题标题"></el-table-column>
                <el-table-column prop="problemDesc" label="问题描述"></el-table-column>
                <el-table-column prop="problemAmount" label="问题金额" width="180">
                  <template slot-scope="scope">
                    {{scope.row.problemAmount | toThousandslsFilter}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="170">
                  <template slot-scope="scope">
                    <el-button v-if="permissions.projectProblem_get" type="text" size="small" icon="el-icon-view" @click="showViewBox(scope.row)">查看
                    </el-button>
                    <el-button v-if="permissions.projectProblem_add" type="text" size="small" icon="el-icon-edit" @click="showEditBox(scope.row)">编辑
                    </el-button>
                    <el-button v-if="permissions.projectProblem_del" type="text" size="small" icon="el-icon-delete" @click="delProblem(scope.row)">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
            <el-table-column prop="projectCode" label="项目编号"></el-table-column>
            <el-table-column prop="projectName" label="项目名称"></el-table-column>
            <el-table-column prop="projectProblemCount" label="问题数量"></el-table-column>
        </el-table>
        <div class="container-page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 40, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
        </div>

      <el-dialog top="5vh" :title="formTitle" :visible.sync="viewBox"
                 :append-to-body="true" :before-close="closeViewBox" width="1200px">
        <el-form ref="optForm" :model="form" label-width="90px">
          <div class="ledgerTitle">项目信息</div>
          <el-row>
            <el-col :span="8">
              <el-form-item label-width="120px" label="项目编号:">
                {{ problemForm.projectId }}
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label-width="120px" label="审计项目名称:">
                {{ problemForm.projectName }}
              </el-form-item>
            </el-col>
          </el-row>
          <div class="ledgerTitle">审计发现</div>
          <el-row>
            <el-col :span="8">
              <el-form-item label-width="120px" label="问题类型:" >
                <div v-if="Number(problemForm.problemType) === 0">
                  <span>经济型问题</span>
                </div>
                <div v-else>
                  <span>非经济型问题</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="120px" label="问题金额类型:" :hidden="problemForm.problemType === 1">
                <div v-if="Number(problemForm.problemAmountType) === 0">
                  <span>绩效性问题金额</span>
                </div>
                <div v-else>
                  <span>合规类问题金额</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="问题金额:" :hidden="problemForm.problemType === 1">
                {{ problemForm.problemAmount }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label-width="120px" label="问题标题:">
                <pre class="pre-style">{{ problemForm.problemTitle }}</pre>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label-width="120px" label="问题描述:">
                <pre class="pre-style">{{ problemForm.problemDesc }}</pre>
              </el-form-item>
            </el-col>
          </el-row>
<!--          <el-row>-->
<!--            <el-col>-->
<!--              <el-form-item label-width="120px" label="定性及依据:">-->
<!--                <pre class="pre-style">{{ problemForm.basisInfo }}</pre>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col>-->
<!--              <el-form-item label-width="120px" label="审计意见及依据:">-->
<!--                <pre class="pre-style">{{ problemForm.opinion }}</pre>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
          <el-row>
            <el-col>
              <el-form-item label-width="120px" label="审计意见及建议:">
                <pre class="pre-style">{{ problemForm.suggestion }}</pre>
              </el-form-item>
            </el-col>
          </el-row>
<!--          <el-row>-->
<!--            <el-col>-->
<!--              <el-form-item label-width="120px" label="备注:">-->
<!--                <pre class="pre-style">{{ problemForm.remark }}</pre>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeViewBox" size="small" icon="el-icon-close">关闭</el-button>
        </span>
      </el-dialog>

      <!-- 弹窗, 新增 / 修改 -->
      <table-form ref="dataForm" @cancelDialog="closeDoubtfulDialog"></table-form>
    </basic-container>
</template>

<script>
  import {fetchListByObject, delObj, listProblemByProjectId} from '@/api/adis/execute/discover'
  import TableForm from '@/components/form/projectProblem'
  import {mapGetters} from 'vuex'
  import {listPaperByProjectId} from "@/api/adis/execute/paper";
  export default {
    data () {
      return {
        loading: false,
        formTitle: '',
        viewBox: false,
        query: {},
        form: {},
        problemForm: {},
        data: [],
        page: {
            size: 10,
            current: 1,
            total: 0
        },
        dataListLoading: false,
      }
    },
    components: {
      TableForm
    },
    created () {
      this.onLoad();
      this.Authorization = 'Bearer ' + this.$store.getters.access_token
    },
    computed: {
      ...mapGetters(['permissions','userInfo'])
    },
    methods: {
      handleRowClick(row, event) {
        this.query.projectId = row.projectId;
        listProblemByProjectId(this.query).then(res => {
          console.log(321321)
          this.$set(row, 'projectProblemDTOS', res.data.data);
          // 使用$refs调用toggleRowExpansion方法，但 Element UI 默认支持点击展开，此处可省略
          this.$refs.table.toggleRowExpansion(row,true);
          // this.$set(this, "expandedRow", row);
          // this.expandedRows.push(row)
          this.data.forEach(item => {
            if (item.projectId !== row.projectId) {
              this.$refs.table.toggleRowExpansion(item,false);
            }
          })
        })
      },
      rowKeyMethod(row) {
        // 使用唯一的 id 字段作为 row-key
        return row.projectId;
      },
      rowKeyMethod1(row) {
        // 使用唯一的 id 字段作为 row-key
        return row.problemId;
      },
      handleCellClick(row, column) {
        if (row && column.label !== "操作"){
          this.showViewBox(row)
        }
      },

      delProblem(row){
        this.$confirm('确定删除该条数据吗？',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() =>{
          return delObj(row.problemId);
        }).then(()=>{
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
      },
      showViewBox(row){
        this.viewBox = true;
        this.formTitle = row.projectName
        this.problemForm = row;
      },
      closeViewBox() {
        this.viewBox = false;
      },
      showEditBox(row){
        this.addOrUpdateHandle (row,false);
      },
      // 新增 / 修改
      addOrUpdateHandle (row,type) {
        this.$nextTick(() => {
            this.$refs.dataForm.init(row,type);
        })
      },
      closeDoubtfulDialog() {
        this.onLoad(this.page);
      },
      onSearch(){
        this.page.current = 1;
        this.onLoad(this.page);
      },
      searchReset() {
        this.query = {};
        this.page.current = 1;
        this.onLoad(this.page);
      },
      handleCurrentChange(current) {
        this.page.current = current;
        this.onLoad(this.page);
      },
      handleSizeChange(size) {
        this.page.size = size;
        this.onLoad(this.page);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        fetchListByObject(Object.assign(params, this.query, page)).then(res => {
            this.loading = false;
            const data = res.data.data;
            this.page.total = data.total;
            this.data = data.records;
            this.handleRowClick(this.data[0]);
        }, () => {
            this.loading = false;
        });
      },
    }
  }
</script>


